React Native中的布局
使用width和heightreact native中width和height没有单位，表示的是与设备像素密度无关的逻辑像素点<View style={{width:100,height:100,backgroundColor: 'gray'}}> <Text style={{fontSize: 16}}>测试字体</Text></View>上面的width、height、fontSize在android中宽和高被解析成dp、字体被解析为sp；iOS上宽和高被解析为pt，虽然width和height...
2024-01-10
React Native实战项目
RNMeituanRNMeituan 基于React Native 0.44.2版。仿美团客户端，目前只实现了一级页面。导航组件使用的是官方推荐的react-navigation，另外在更多模块中实现了一个二级页面【Realm数据库Demo】,后续考虑实现更多页面。项目亮点1、采用组件化开发方式。2、列表采用最新FlatList组件，支持下拉刷新、上拉加载更...
2024-01-10
React Native 架构一览
一.架构设计整体上分为三大块，Native、JavaScript 与 Bridge：Native 管理 UI 更新及交互，JavaScript 调用 Native 能力实现业务功能，Bridge 在二者之间传递消息。即：最上层提供类 React 支持，运行在JavaScriptCore提供的 JavaScript 运行时环境中，Bridge 层将 JavaScript 与 Native 世界连接起来。具体的，Shadow Tree 用来定...
2024-01-10
react Native 第四天
1.props : 1.props 就是 Image 标签的src ，input 标签的text 用于组件初始化时需要的一些数据。2.使用props可以定制化插件，使插件可以复用3.props是从父元件传入2.理解state 1.有两种类型的数据可以控制组件，一个是props，props在组件的整个生命周期中是固定的2.如果要改变组件的数据需要改变，我们必须使...
2024-01-10
React Native 开发之IDE
个人暂时使用Atom和Nuclide，虽然有些不方便，不过喜欢界面以及安装简单哈哈，之后可能尝试下别的。译注：React Native官方更推荐使用WebStorm或Sublime Text来编写React Native应用。1. Atom和Nuclide1) Atom编辑器Atom是一个开源版本的编辑器，有着非常强大以及完美的体验，Atom最大的特色就是可以安装很多的插...
2024-01-10
React Native遇到的问题(一)
在我们创建React Native项目的时候发现gradle 版本相对比较低的，而且很多情况下直接编译会报错。而网上的很多解决方案就是gradle version改为1.2.3,于是，我有一个疑问，现在的gradle verion都已经3.0.1了，为什么还不升级呢？但是我发现我直接修改后，更是报各种错。 首先看下图这是我在网上搜到的一与...
2024-01-10
React Native——组件的生命周期
组件生命周期上流程图描述了组件从创建、运行到销毁的整个过程，可以看到如果一个组件在被创建，从开始一直到运行会依次调用getDefaultProps到render这五个函数；在运行过程中，如果有属性和状态的改变，又会触...
2024-01-10
React Native中的全局变量/常量
在ReactNative中，有一种方法可以在全局变量上定义将要使用的所有字符串，就像在Android开发中一样，这里有一个String.xml，您可以在其中放置所有字符串。回答：我要做的是创建一个globals模块…//文件：Globals.jsmodule.exports = { STORE_KEY: 'a56z0fzrNpl^2', BASE_URL: 'http://someurl.com', COLOR: { ORANGE: '#C50', DA...
2024-01-10
React Native获取手机的各种高度
一、窗口高度即图中黄色+蓝色部分import { Dimensions } from "react-native";const deviceHeight = Dimensions.get('window').height; 二、屏幕高度即图中黄色+蓝色+红色部分import { Dimensions } from "react-native";const deviceHeight = Dimensions.get('screen').height; 三、内容高度即图中蓝色部分import { Style...
2024-01-10
React-Native 之 项目实战(一)
前言本文有配套视频，可以酌情观看。文中内容因各人理解不同，可能会有所偏差，欢迎朋友们联系我。文中所有内容仅供学习交流之用，不可用于商业用途，如因此引起的相关法律法规责任，与我无关。如文中内容对您造成不便，烦请联系 277511806@qq.com 处理，谢谢。转载麻烦注明出处，谢谢。...
2024-01-10
React Native之FlexBox布局
参考原文链接：https://www.cnblogs.com/wujy/p/5841685.html弹性盒模型（The Flexible Box Module）,又叫Flexbox，意为“弹性布局”，旨在通过弹性的方式来对齐和分布容器中内容的空间，使其能适应不同屏幕，为盒装模型提供最大的灵活性。Flex布局主要思想是：让容器有能力让其子项目能够改变其宽度、高度（甚至...
2024-01-10
React Native小白入门学习路径——三
迷茫，真的迷茫。 或许是自己努力的还不够吧，在学习的过程中遇到了很多问题，自己尝试借助搜索引擎解决问题，无奈国内的教程写的还很基础，涉及到稍微具体一点的问题时讲解就比较少更新也比较慢，绝大多数还是很早之前的版本下的处理方式。满满的还总结出一个结论，绝大多数讲入门的教...
2024-01-10
React-Native 原生 APP 更新
当一个 APP在运行的时候, 开发者想要将自己的代码更新到用户的手机上时, 一般都有两种方案, 一是热更新, 二就是 APP 更新.热更新暂且不说,这篇文章就讲讲 APP 如何更新App更新流程在 App 打开时请求接口或文件, 获取远程版本/版本更新说明/地址等等重用信息通过库或者原生方案, 获取 App 的当前版...
2024-01-10
Windows搭建React Native环境
自己搭建了Rctive Native的环境，还是遇到了些问题，记录下。一、环境搭建1.下载安装JDKJDK的下载安装配置最好1.8版本的，我自己的电脑之前安装的是1.7的，在运行的过程中出现过问题。2.下载配置Android SDK因为我自己是做Android开发的，这些都已经下载好了，也可以去AndroidDevTools去下载（http://www.and...
2024-01-10在React Native中按下时更改按钮样式
我希望我的应用程序中的按钮样式在按下时可以更改。做这个的最好方式是什么？回答：使用TouchableHighlight。这里是一个例子：'use strict'; import React, {Component,StyleSheet,PropTypes,View,Text,TouchableHighlight} from "react-native";export default class Home extends Component {constructor(props) { super(pro...
2024-01-10
React Native(十四)——Slider
最近我们rn版的App快要内测了，小伙伴们都在积极的改bug，于是在其中就遇到了关于Slider的部分小知识，特地记录自己用到的部分属性，也许恰好会帮助到用到该组件的你：属性罗列（https://reactnative.cn/docs/0.51/slider.html#content）：View props… 继承View的所有属性；1.disabled:如果为true，用户就...
2024-01-10
MobX在React Native 中的使用心得
MobX 是一款十分优秀的状态管理库，不但书写简洁还非常高效。当然这是我在使用之后才体会到的，当初试水上车的主要原因是响应式，考虑到可能会更符合 Vue 过来的思考方式。然而其实两者除了响应式以外并没有什么相似之处。在使用过程中走了不少弯路，一部分是因为当时扫两眼文档就动手，对 ...
2024-01-10无法运行jetifier React Native
我尝试运行react-native run-android，但出现此错误。info Running jetifier to migrate libraries to AndroidX. You can disable it using "--no-jetifier" flag. error Failed to run jetifier. Run CLI with --verbose flag for more details. Error: spawnSync C:\Users\JayK...
2024-01-10
React Native 使用入门笔记(一）环境搭建
标题背景最近公司接了一个项目，需要做移动端，由于没有IOS相关的人员，为了减少学习成本，就打算使用的混合开发的技术。简单了解了一下，现有跨平台方案有：Flutter,React Native，Weex和Cordova这种hybride开发。考虑了一下技术的运行速度，支持平台，生态环境，上手速度。还是决定了使用React Native...
2024-01-10
React Native 之 CheckBox 组件
React Native 的组件中没有包含 CheckBox 组件。由于用到了所以在此总结一篇关于 CheckBox 组件的文章。1、安装$ npm i react-native-check-box --save2、效果图3、代码import React, {Component} from 'react';import {Platform, StyleSheet, Text, View,Image} from 'react-native';import CheckBox from 'react-native...
2024-01-10
React Native年度报告(2017-2018)
概述在过去的一年中React Native经历了从v0.40到v0.52的十几次的版本迭代，我们看到在这十几次的版本迭代中React Native的组件库在不断地壮大，在新引进的组件中既有FlatList、SectionList等具有更高性能的列表组件，也有与时俱进的用于适配全屏幕的SafeAreaView组件，同时呢，一些性能较差、无法适应React Native...
2024-01-10
React Native学习笔记（一）——配置开发环境
前言 来到新公司，要求除了会Android外，最好也能会RN。刚来公司的时候，我问一个跟我同时期来的同事问他是做那方面的，他说他做RN。RN？我顿时一脸懵逼，RN是什么鬼？他跟我简单介绍了一下，RN是近几年才流行起来的移动端APP开发技术，因为是基于JS文件的开发，因此它不仅适用Android平台，IOS平...
2024-01-10
React Native 开发日常、常见问题总结及解决
关注公众号： 微信搜索 web全栈进阶 ; 收货更多的干货一、建议看法：个人觉得 APP 开发性能 Flutter > React Native > Weex难度：Flutter > React Native > Weex 有点尴尬建议：Flutter 未来的趋势，赶紧学，赶紧干；大公司基本都用上了；方法：可以关注 阿里 相关的 技术公众号，你能知道目前 热门技术及干货； ...
2024-01-10
NiceFish-React
NiceFish-React首屏加载仅需663ms阅读页面（不需要登录访问权限）统计图表页面,采用UI指定颜色值使用轮询算法实现(需要登录访问权限)文章评论页面有过滤和排序功能这是我为NIceFish系列设计的登录效果图阅读详情页面(不需要登录访问权限)我的个人博客我参与的系列项目我的社交主页你好，我...
2024-01-10
React-Native之swiper(轮播组件)
使用说明： 1. 先安装React-native-swiper npm i react-native-swiper –save 2. 导入Swiper import Swiper from ‘react-native-swiper’;代码：import...
2024-01-10
